<template>
  <div id="app" class="whitebg bloglist">
    <the-li v-for="(item,index) in ulData" :key="index" :liData="item"/>
    <ThePage :total="total" @on-change="pageChange"/>
  </div>
</template>
<script>
import TheUser from "@/components/user";
import TheLi from "@/components/li";
import ThePage from "@/components/Page";
export default {
  components: {
    TheUser,
    TheLi,
    ThePage
  },
  data() {
    return {
      total: 0,
      page: 1,
      ulData: []
    };
  },
  created() {
    this.getPageData();
  },
  methods: {
    pageChange(d) {
      this.page = d;
    },
    getPageData() {
      api.getlist({ page: this.page }).then(res => {
        this.ulData = res.data;
        this.total = res.total;
      });
    }
  }
};
</script>
<style >
#app {
  width: 900px;
  /* display: flex; */
  /* justify-content: space-between; */
  margin: 15px auto 0;
}
.left {
  width: 800px;
  background: #fff;
  min-height: 300px;
}
.right {
  width: 320px;
  min-height: 300px;
}
</style>
